<template>
    <page-main>
        <el-form ref="formData" :model="formData" :rules="rules" label-width="100px">
            <el-form-item label="租户编号" prop="tenantCode">
                <el-col :span="5">
                    <el-input v-model="formData.tenantCode" />
                </el-col>
            </el-form-item>
            <el-form-item label="手机账号" prop="account">
                <el-col :span="5">
                    <el-input v-model="formData.account" />
                </el-col>
            </el-form-item>

            <el-form-item label="版本套餐" prop="versionNbr">
                <div v-for="(version, index) in versionData" :key="index" style="float: left; width: 200px; border: 1px solid #dee1e8; margin-right: 20px;">
                    <div style="text-align: center;">
                        <div>{{ version.versionLogo }}</div>
                        <div v-html="version.describe"/>
                        <div>原价:￥
                            <strike>{{ version.originalPrice }}/1年</strike>
                        </div>
                        <div>渠道价:￥{{ version.supplyPrice }}/1年</div>
                        <el-radio-group v-model="formData.versionNbr">
                            <el-radio :label="version.versionNbr">{{ version.versionName }}</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" plain size="small" @click="submitForm('formData')">开通服务</el-button>
                <el-button type="primary" plain size="small" @click="$router.go(-1)">返回</el-button>
            </el-form-item>
        </el-form>
    </page-main>
</template>

<script>

import tenantApi from '@/api/tenant/tenant'
import versionApi from '@/api/init/version'
export default {
    name: 'Tenant',
    components: {  },
    data() {
        return  {
            versionData: [], // 所有版本数据
            formData: {
                tenantCode: '',
                account: '',
                versionNbr: '',
                channel: {code: 'SYSTEM', desc: '平台开通'}
            },
            rules: {
                tenantCode: [
                    { required: true, message: '请输入租户编号', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                account: [
                    { required: true, message: '请输入手机账号', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                versionNbr: [
                    { required: true, message: '请选择套餐', trigger: 'blur' }
                ]
            }
        }
    },
    created() {},
    mounted() {
        this.getVersionData()
    },
    methods: {
        // 获取版本数据
        getVersionData() {
            versionApi.query({}).then(res => {
                this.versionData = res.data.data
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 添加
                    tenantApi.add(this.formData).then(() => {
                        this.$router.push({ path: '/tenant'})
                    })
                } else {
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        }
    }
}
</script>
